<!-- 底部小播放器 -->
<template>
  <div class="mini-palyer-container" @click="enterFullScreenAction" :style="{bottom: distance + 'px'}">
    <!-- 专辑图片 -->
    <div class="icon">
      <div class="img-wrapper" :class="{ animationPaly: playing,animationStop: !playing, }">
        <img class="img" :class="{pause: !playing}" :src="currentSong.al.picUrl+'?param=80y80'" alt="" />
      </div>
    </div>
    <!-- 歌曲信息 -->
    <div class="text">
      <h2 class="name">{{currentSong.name}}</h2>
      <p class="desc">{{currentSong.ar}}</p>
    </div>
    <!-- 播放图标 -->
    <div class="control controlPlay" @click.stop="">
      <circle-progress :value="playing" @input="changePlayingAction" :progress="progress" />
      <!-- <i class="iconfont" @click="changeAction" :class="{ 'icon-24gf-play': !playing, 'icon-stop': playing }"></i> -->
    </div>
    <!-- 列表图标 -->
    <div class="control" @click.stop="popupBottom">
      <i class="iconfont icon-liebiao"></i>
    </div>
  </div>
</template>

<script  type='module'>
// import Bus from '../../common/eventBus'
import CircleProgress from './components/circle-progress'
import { mapState, mapGetters } from 'vuex'
export default {
  components: {
    CircleProgress
  },
  data () {
    return {
    }
  },
  // 接收外部属性
  props: {
    // 获取进度
    progress: Number
  },
  computed: {
    // 把仓库的state转为组件的计算属性
    ...mapState({
      playing: (state) => state.player.playing
    }),
    // 把仓库的getters转为组件的计算属性
    ...mapGetters({
      currentSong: 'player/currentSong'
    }),
    // 小播放器离底部的高度
    distance () {
      let h = 0
      if (this.$route.meta.tabbar) {
        h = 50
      }
      return h
    }
  },
  methods: {
    changePlayingAction (value) {
      // 让仓库修改playing的值
      this.$store.commit({
        type: 'player/setPlaying',
        value
      })
    },
    // 进入全屏播放
    enterFullScreenAction () {
      this.$store.commit({
        type: 'player/setFullScreen',
        value: true
      })
    },
    popupBottom () {
      this.$emit('popupBottom', true)
    }
  },
  created () {
    // 事件总线
    // this.$nextTick(() => {
    //   Bus.$on('homeDistance', (h) => {
    //     this.distance = h
    //   })
    // })
    // console.log(this.$router)
  },
  // 销毁事件总线
  beforeDestroy () {
    // Bus.$off('homeDistance')
  }
}
</script>

<style scoped lang="less">
.mini-palyer-container {
  border-top: 1px solid #eee;
  position: fixed;
  left: 0;
  // bottom: 50px;
  z-index: 1000;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
}
.icon {
  // flex: 0 0 40px;
  width: 32px;
  height: 32px;
  margin: 0 10px;
  // padding: 0 10px 0 20px;
  .img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
      border-radius: 50%;
    .img {
      width: 100%;
      height: 100%;
      animation: animationPaly 10s linear infinite;
      border-radius: 50%;
      &.pause {
        animation-play-state: paused;
      }
    }
  }
}
.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
  overflow: hidden;
  .name {
    font-size: 12px;
    color: #333;
    margin: 0px;
  }
  .desc {
    font-size: 10px;
    color: #999;
    margin: 0px;
  }
}
.control {
  flex: 0 0 30px;
  padding: 0 10px;
  color: #d44439;
  .iconfont.icon-stop {
    font-size: 16px;
  }
  .iconfont.icon-liebiao {
    font-size: 24px;
  }
}
.controlPlay {
  padding-top: 4px;
  height: 50px;
  position: relative;
  .iconfont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.animationPaly {
  // animation-fill-mode: forwards;
  animation-play-state: running;
}
.animationStop {
  animation-play-state: paused;
  // animation-fill-mode:forwards;
}
@keyframes animationPaly {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
</style>
